<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./../template/WorkspaceTemplate.xhtml">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">

    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">
        <style>
            .ui-state-highlight.ui-selected {
                color: blueviolet;
            }
            .ui-commandButton-wizard-selected{
                background-color: #D20005;
                font-weight: bold;
                color: #000000;
            }
            .ui-commandButton-wizard-unselected{
                background-color: #D20005;
                font-weight: bold;
                color: #AFAFAF;
            }
        </style>
    

        <h:form id="salesQuotationForm" style="font-size: 85%">
            <h2>Create Sales Quotation</h2>
            <br/>
            <p:commandButton styleClass="ui-commandButton-wizard-selected" value="Step 1: Select Client and Order Items" image="ui-icon ui-icon-circle-triangle-e" />
            <p:commandButton styleClass="ui-commandButton-wizard-unselected" value="Step 2: Enter Shipping Details and Special Discount" image="ui-icon ui-icon-circle-triangle-e"/>
            <p:commandButton styleClass="ui-commandButton-wizard-unselected" value="Step 3: Confirm" image="ui-icon ui-icon-circle-triangle-e"/>
            <br/>
            <br/>
            <p:panel >
                <p:messages  />
                <br/>
                <br/>
                <h:panelGrid id="panelgrid1" columns="6" cellpadding="10">
                    <h:outputLabel style="font-weight: bold" value="Client ID: "/>
                    <h:outputText id="clientId" style="font-weight: bold" value="#{sqManagerBean.salesQuotation.client.clientId}"/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel value=""/>
                    <h:outputLabel style="font-weight: bold" value="Sales Quotation Number: "/>
                    <h:outputLabel id="salesQuotationNumber" style="font-weight: bold" value="#{sqManagerBean.salesQuotation.sqNumber}" />
                    

                    <h:outputLabel style="font-weight: bold" value="Company Name: "/>
                    <p:inputText id="companyName" value="#{sqManagerBean.salesQuotation.client.companyName}" label="Company Name" required="true" requiredMessage="Please select a client"/>
                    <p:commandButton oncomplete="clientDialog.show()" image="ui-icon ui-icon-search"/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel style="font-weight: bold" value="RFQ Number: "/>
                    <p:inputText id="rfqNumber" value="#{sqManagerBean.salesQuotation.rfqNumber}" label="RFQ Number" required="true" requiredMessage="Please enter RFQ number"/>

                    <h:outputLabel style="font-weight: bold" value="Quotation Date: "/>
                    <h:outputText id="quotationDate" value="#{sqManagerBean.salesQuotation.dateStr}"/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel style="font-weight: bold" value="Validity Date: "/>
                    <h:outputText id="validityDate" value="#{sqManagerBean.salesQuotation.validityDate}">
                        <f:convertDateTime pattern="MMMM dd, yyyy"/>
                    </h:outputText>

                    <h:outputLabel style="font-weight: bold" value="Currency: "/>
                    <h:selectOneRadio required="true" requiredMessage="Please select one currency" value="#{sqManagerBean.salesQuotation.currency}">
                        <f:selectItem itemLabel="SGD" itemValue="true"/>
                        <f:selectItem itemLabel="USD" itemValue="false"/>
                    </h:selectOneRadio>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel style="font-weight: bold" value="Promotion: "/>
                    <h:selectBooleanCheckbox value="#{sqManagerBean.salesQuotation.promotion}"/>

                </h:panelGrid>

                <br/>
                <br/>
                <br/>

                <h:outputText value="Order Items" style="font-weight: bold; font-size: 110%"/>
                <p:separator title="Order Items"/> 
                <br/>
                <p:dataTable var="oneIL" value="#{sqManagerBean.salesQuotation.itemLines}">
                    <p:column headerText="Product Type" >
                        <h:outputText value="#{oneIL.product.productType}"/>
                    </p:column>
                    <p:column headerText="Quantity Ordered Case">
                        <h:inputText id="orderQuantity" label="Order Quantity" required="true" requiredMessage="Please enter order quantity" value="#{oneIL.qtyOrderedCase}"/>
                    </p:column>
                </p:dataTable>

                <br/>
                <br/>
                <br/>
                <br/>

                <h:outputText value="Comments" style="font-weight: bold; font-size: 110%"/>
                <p:separator title="Comments"/>
                <br/>
                <h:panelGrid id="panelgrid4" columns="6" cellpadding="10">
                    <p:inputTextarea style="width:670px; height:70px;" effectDuration="400" value="#{sqManagerBean.salesQuotation.comments}"/><br/>
                </h:panelGrid>

            </p:panel>

            <br/>
            <br/>
            <div align="right">
                <p:commandButton value="Next" ajax="false" action="#{sqManagerBean.next}"/>
            </div>
            <br/>
            <br/>
        </h:form>

        <p:dialog header="Search Client" widgetVar="clientDialog" showEffect="explode" hideEffect="explode" height="600" width="800">  
            <h:form id="clientForm">           
                <p:dataTable var="salesLead" value="#{sslManagerBean.salesLeads}" emptyMessage="No clients found with given criteria"  selection="#{sqManagerBean.salesQuotation.client}" selectionMode="single">

                    <f:facet name="header">
                        <p:outputPanel>
                            <h:outputText value="Search all fields:" />
                            <p:inputText id="globalFilter" onkeyup="ctbl.filter()" style="width:150px" />
                        </p:outputPanel>
                    </f:facet>

                    <p:column filterBy="#{salesLead.companyName}" 
                              headerText="Company Name" footerText="contains"
                              filterMatchMode="contains">
                        <h:outputText value="#{salesLead.companyName}" />
                    </p:column>

                    <p:column filterBy="#{salesLead.clientId}" headerText="Client Id" footerText="contains">
                        <h:outputText value="#{salesLead.clientId}" />
                    </p:column>

                    <p:column filterBy="#{salesLead.category}" headerText="Client Category" footerText="exact"
                              filterOptions="#{sslManagerBean.categoryOptions}"
                              filterMatchMode="exact">
                        <h:outputText value="#{salesLead.category}" />
                    </p:column>
                </p:dataTable>
                <br/>
                <br/>
                <div align="right">
                    <p:commandButton value="Select Client" update="salesQuotationForm:clientId salesQuotationForm:companyName" oncomplete="clientDialog.hide()"/>
                </div>
            </h:form>
        </p:dialog>

    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>